<!--新任务-->
<template>
  <view class="navigation">
    <eui-navbar ref="EuiNavBar" title="新增工单" displayable="true" color="#000000" backgroundColor="#FFFFFF" rightIcon="" />
    <view class="main-view" :style="{ height: scrollHeight + 'rpx' }">
      <scroll-view scroll-y="true" style="height: 100%;">
        <eui-card topMargin="0">
          <text class="card-title" style="margin-bottom: 4rpx">{{ topTitle }}</text>
          <eui-card-input v-model="formData.c_name" title="" placeholder="描述任务标题，不超过50个字。"
                          type="textarea" :displayable="false" maxlength="50" />
          <view class="m-card-input-view2">
            <view class="m-card-input-title2">
              <text class="m-title-text2">任务时间</text>
            </view>
            <view class="time-view" @click="chooseTime(0)">
              <text class="time-top">{{ getStartTime }}</text>
              <text class="time-bottom">{{ getStartDate }}</text>
            </view>
            <view class="heng-view" />
            <view class="time-view" @click="chooseTime(1)">
              <text class="time-top">{{ getEndTime }}</text>
              <text class="time-bottom">{{ getEndDate }}</text>
            </view>
          </view>
          <eui-card-input v-model="formData.c_time" title="预估用时（分钟）"  h-padding="0" type="number"
                          ref="inputCostTime" rightIconType="" placeholder="请输入预估用时"
                          @confirm="costTimeFunc" isBlur :titleWidth="245" :required="true" maxlength="8"/>
        </eui-card>
        <eui-card>
          <text class="card-title">任务设置</text>
          <view class="line-view" style="margin-top: 16rpx" />
          <eui-card-input v-model="formData.c_property" title="性质" :range="selectRange.propertyList"
                          placeholder="请选择性质" h-padding="0" type="selector" rightIconType="right" :required="true" />
          <eui-card-input v-model="formData.c_importance" title="重要性" :range="selectRange.importanceList"
                          placeholder="请选择重要性" h-padding="0" type="selector" rightIconType="right" :required="true" />
          <eui-card-input v-model="formData.c_level" title="等级" :range="selectRange.levelList"
                          placeholder="请选择等级" h-padding="0" type="selector" rightIconType="right" :required="true" />
          <eui-card-input v-model="formData.c_distribute_mode" title="分配方式" :range="selectRange.distributeList"
                          placeholder="请选择分配方式" h-padding="0" type="selector" rightIconType="right" :required="true" />
          <template v-if="isExpanded">
            <eui-card-input v-model="formData.c_timeliness" title="时效性" :range="selectRange.timelinessList"
                            placeholder="请选择时效性" h-padding="0" type="selector" rightIconType="right" :required="true" />

            <eui-card-input v-model="formData.c_metering_method" title="计量方式" :range="selectRange.meteringList"
                            placeholder="请选择计量方式" h-padding="0" type="selector" rightIconType="right" @buttonClick="cardInputMeterMethod" />
            <eui-card-input v-model="formData.c_unit" :displayable="formData.c_metering_method == 'M0'" title="单位" :range="selectRange.unitList"
                            placeholder="" h-padding="0" type="selector" rightIconType="right" :required="formData.c_metering_method == 'M1'" />
            <eui-card-input v-model="formData.c_recv_adno" title="任务接收部门" h-padding="0" type="textname2"
                            :name="getName('rdsDeparts', formData.c_recv_adno)" ref="cardAdnoInput" isBlur
                            rightIconType="right" @iconClick="clickRight('c_adno')"  placeholder="" />
            <eui-card-input v-model="formData.c_role_code" title="目标角色" :range="selectRange.roleList"
                            placeholder="" h-padding="0" type="selector" rightIconType="right" />
            <eui-card-input v-model="formData.c_exclude" title="是否排它" h-padding="0" type="switch" :required="true" />
            <eui-card-input v-model="formData.c_is_match_store" title="是否匹配在店" h-padding="0" type="switch" :required="true" />
            <eui-card-input v-model="formData.c_must_upload_complate_img" title="任务完成必须上传图片" h-padding="0" type="switch" :titleWidth="350" />
          </template>
          <view class="btn-box flex-row-between" @click="onToggleState">
            <text>{{ isExpanded ? '隐藏' : '更多' }}</text>
            <view class="iconfont" :class="{'icon-jiantouxiangshang': isExpanded, 'icon-jiantouxiangxia': !isExpanded}" ></view>
          </view>
        </eui-card>
        <eui-card>
          <text class="card-title" style="margin-bottom: 4rpx">详情描述</text>
          <eui-card-input v-model="formData.c_depiction" title="" placeholder=""
                          type="textarea" :displayable="false" maxlength="100" />
        </eui-card>
        <eui-card>
          <text class="card-title" style="margin-bottom: 28rpx">图片详情</text>
<!--          <view>-->
<!--            <eui-card-input v-model="c_images" type="image" />-->
<!--          </view>-->
          <eui-file-picker ref="uploadRef" v-model="c_images" mode="grid" file-mediatype="image"
                           :image-styles="imageStyle" :autoUpload="false" return-type="array" @select="selectPic"
                           @delete="deletePic">
            <view class="m-image-btn">
              <view class="m-image-view" />
              <text class="m-image-text">上传图片</text>
            </view>
          </eui-file-picker>
        </eui-card>
        <view class="gap-view" />
      </scroll-view>
    </view>
    <view class="bottom-view">
      <view class="center-style">
        <eui-button v-if="formData.c_distribute_mode === 'D0'" type="max2" title="指派" singleTag="指派" @buttonClick="confirm" />
        <view class="gap-view" />
        <eui-button type="max" title="发布" singleTag="发布" @buttonClick="confirm" />
      </view>
    </view>
    <datetimePicker
        :value="formData.c_plan_begin_time"
        :c_plan_begin_time="formData.c_plan_begin_time"
        :c_require_complete_time="formData.c_require_complete_time"
        :def-time="formData.c_time"
        :timeIndex="timeIndex"
        :visible="showDatePicker"
        :model="dateModel"
        :yearsArr="yearsArr"
        :isDark="false"
        title="选择时间"
        @cancel="handCancel"
        @confirm="handConfirm"
    />
    <eui-popup ref="popupAdjust" background-color="#f8f8f8" type="center" :mask-click="false" :animation="false">
      <view class="popup-adjust">
        <TaskAdjust :formatData="formatData" @hidePopup="hideAdjustPopup"
                    @clickFunc="assignTask" @userFunc="choosePerson"
                    title="派工给指定人员" btnTitle="指派" />
      </view>
    </eui-popup>
  </view>
</template>

<script setup type="ts">
import {computed, onMounted, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getRdsSysConfig, init} from "@/hooks/init";
import { getRelatedName, getDictName, getUserDictSelectList, getDictSelect, getDictSelectList, getWeightUnits, getDictList } from '../components/RelatedName.js';
import Enjoy from "@/common/enjoy";
import datetimePicker from './components/datetime-picker/datetime-picker.vue';
import TaskAdjust from './components/taskAdjust.vue'
import dateRangUtil from '../../../common/dateRangUtil';
import { getRdsUrl, rdsRequest } from "@/hooks/rdsServices";
import {useMainStore} from "@/store/modules/store";
import {useLoginStore} from "@/store/modules/useLoginStore";
import dayjs from 'dayjs';
import Guid from '@/common/guid';
import service from "@/common/service";
import useService from '@/hooks/useService';
import useUpload from "@/hooks/useUpload";
const mainService = useService({ prefix: "mainApi" });
const { upload, remove, fetchFile } = useUpload({ prefix: 'mainApi' });
const rdsUrl = getRdsUrl();
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();
const popupAdjust = ref(null);

const scrollHeight = ref(0);
const datetimePicker1 = ref(null);
const topTitle = ref('');
const isExpanded = ref(false);
// 时间选择
const showDatePicker = ref(false);
const dateModel = ref(['year', 'month', 'day', 'hour', 'minute']);
const yearsArr = ref([dayjs().year(), dayjs().year()+10]);
const timeIndex = ref(0);
// 工单数据
const formData = ref({
  c_class_code: "",
  c_depiction: "", // 详情描述
  c_distribute_mode: "D0", // 任务分配方式
  c_guid: "",
  c_importance: "I0", // 任务重要性
  c_level: "1", // 任务角色等级
  c_metering_method: "M0", // 任务计量方式
  c_mk_dt: "",
  c_mk_userno: "",
  c_modify_dt: "",
  c_modify_userno: "",
  c_name: "", // 任务标题
  c_name_en: "",
  c_plan_begin_time: dayjs().format('YYYY-MM-DD HH:mm'), // 计划开始时间
  c_property: "P0", // 任务性质
  c_recv_adno: "", // 部门
  c_recv_adno_name: "",
  c_recv_userno: "",
  c_require_complete_time: dayjs().add(30,'m').format('YYYY-MM-DD HH:mm'), // 要求完成时间
  c_role_code: "", // 目标角色
  c_source: "S1", // *待处理*
  c_store_id: "",
  c_time: 30, // 预估用时(分钟)
  c_timeliness: "T0", // 任务时效性
  c_unit: "", // 任务计量单位
  c_exclude: false, // 是否排它 0:否 1:是
  c_is_match_store: false, // 是否匹配在店
  c_must_upload_complate_img: false, // 任务完成是否必须上传图片
  c_bill_id: '', //单据号
  c_bill_type: '', //单据类型
});
const selectRange = ref({
  roleList: [], // 目标角色
  propertyList: [], // 性质
  importanceList: [], // 重要性
  timelinessList: [], // 时效性
  levelList: [], // 等级
  distributeList: [], // 分配方式
  meteringList: [], // 计量方式
  unitList: [], // 单位
})
const c_images = ref([]); // 图片
const imageStyle = ref({
    "height": '200rpx',	// 边框高度
	"width": '200rpx',	// 边框宽度
	"border": {
		"color": "#EEEEEE",
		"width": "1rpx",
		"style": "dashed",
		"radius": "10rpx"
  }
})
// 指派
const formatData = ref({
  personName: '', // 处理人
  personId: '',
  costTime: 30, // 预估时间
  startTime: '', // 开始时间
  endTime: '', // 结束时间
  c_code: '',
})

const getSysConfig = async () => {
  selectRange.value.propertyList = getDictSelectList('任务性质');
  selectRange.value.importanceList = getDictSelectList('任务重要性');
  selectRange.value.timelinessList = getDictSelectList('任务时效性');
  selectRange.value.levelList = getDictSelectList('任务角色等级');
  selectRange.value.distributeList = getDictSelectList('任务分配方式');
  selectRange.value.meteringList = getDictSelectList('任务计量方式');
  selectRange.value.unitList = getDictSelectList('任务计量单位');
}

const initTimeOptions = () => {
}

const getStartTime = computed(() => {
  return dateRangUtil.getHourMin(formData.value.c_plan_begin_time);
})

const getStartDate = computed(() => {
  return dateRangUtil.getDateWeek(formData.value.c_plan_begin_time);
})

const getEndTime = computed(() => {
  return dateRangUtil.getHourMin(formData.value.c_require_complete_time);
})

const getEndDate = computed(() => {
  return dateRangUtil.getDateWeek(formData.value.c_require_complete_time);
})

onMounted((e) => {
  getListHeight();
});

onLoad(async (e) => {
  topTitle.value = e.menuTitle;
  formData.value.c_guid = Guid.NewGuid().ToString();
  formData.value.c_class_code = e.classCode;
  service.enjoyShowLoading('正在加载...');
  await getUserRole();
  await getSysConfig();
  service.enjoyHideLoading();
})

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) {
      let info = uni.createSelectorQuery().select(".main-view");
      info.boundingClientRect(function (data) {
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        scrollHeight.value = height / (res.windowWidth / 750) - 100;
      }).exec()
    }
  });
};

// 获取目标角色
const getUserRole = async () => {
  const result = await rdsRequest(rdsUrl.mainApi, 'taskdefine', 'FetchTaskRoles', '');
  if (result && result.length > 0) {
    selectRange.value.roleList = result.map(item => ({
      text: item.Name,
      value: item.Code,
    }));
  }
}

const onToggleState = () => {
  isExpanded.value = !isExpanded.value;
}

// 选择框点击事件
const clickRight = (type) => {
  let parms = Enjoy.GetDialogParms();
  parms.CallBack = SelectionChanged2;
  if (type == 'c_store_id') {
    parms.SelectionType = "机构选择";
  } else if (type == 'c_adno') {
    parms.SelectionType = "部门选择";
    parms.SelectedItems = formData.value.c_recv_adno;
  } else if (type == 'c_wno') {
    parms.SelectionType = "仓库选择";
  }
  Enjoy.OpenDialog(parms)
}

const SelectionChanged2 = async (e) => {
  if (e.SelectionType=='部门选择') {
    formData.value.c_recv_adno = e.BackParms.Key;
    formData.value.c_recv_adno_name = e.BackParms.Value;
  }
}

// 选择计量方式
const cardInputMeterMethod = (e) => {
  // 计时不用选择单位
  if (e === 'M0') {
    formData.value.c_unit = '';
  }
}

// 上传文件
const selectPic = async (e) => {
  const lists = e.tempFiles || [];
  const extendInfo = JSON.stringify({
    BillId: formData.value.c_guid
  });
  for (let i = 0; i < lists.length; i++) {
    const file = lists[i];
    const result = await upload({
      file: {
        ext: file.extname,
        url: file.url,
        name: file.name,
        type: file.fileType,
        guid: Guid.NewGuid().ToString()
      },
      uploadUserNo: loginInfo.sUser,
      extendInfo: extendInfo,
      UploadMethodName: 'UploadTaskFile',
      UniqueKey: 'taskmanager',
      ModuleCode: 'taskallot'
    });
  }
  await FetchTaskComplatedRecord()
}

// 删除文件
const deletePic = async (e) => {
  const fileguid = c_images.value[e.index].c_guid;
  const res = await mainService.request('taskmanager', 'DeleteTaskFile', fileguid);
  await FetchTaskComplatedRecord();
}

const FetchTaskComplatedRecord = async () => {
  const res = await mainService.request('taskmanager', 'FetchTaskFile', { FileId: formData.value.c_guid });
  if (res) {
    c_images.value = res.map(x => {
      return {
        name: x.c_file_name,
        extname: x.c_file_ext,
        url: mainService.getBaseUrl() + '/File/DownLoadFile/' + x.c_guid,
        c_guid: x.c_guid
      }
    })
  }
}

// 选择时间
const chooseTime = (index) => {
  timeIndex.value = index;
  setTimeout(() => {
    showDatePicker.value = true;
  },200)
}

// 选择时间-取消
const handCancel = () => {
  showDatePicker.value = false;
}

// 选择时间-确认
const handConfirm = (time1, time2) => {
  showDatePicker.value = false;
  if (time1) {
    formData.value.c_plan_begin_time = time1;
  }
  if (time2) {
    formData.value.c_require_complete_time = time2;
  }
}

// 校验预估用时
const costTimeFunc = (e) => {
  let { oldValue, newValue } = e;
  let curValue = parseInt(newValue);
  if (isNaN(curValue)) {
    uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '输入的不是有效数字'
    });
    formData.value.c_time = oldValue || 30;
  } else if (curValue < 30) {
    uni.showToast({
      duration: 2500,
      icon: 'none',
      title: '[预估用时（分钟）] 不能小于 30'
    });
    formData.value.c_time = oldValue || 30;
  } else {
    formData.value.c_time = curValue;
  }
  let { c_plan_begin_time, c_require_complete_time } = formData.value;
  let time1 = new Date(c_plan_begin_time); //开始时间
  let time2 = new Date(c_require_complete_time); //结束时间
  const diffInMilliseconds = Math.abs(time2.getTime() - time1.getTime()); //时间差
  const thirtyMinutesInMilliseconds = formData.value.c_time * 60 * 1000; //估时
  if (diffInMilliseconds < thirtyMinutesInMilliseconds) {
    formData.value.c_require_complete_time = dayjs(c_plan_begin_time).add(formData.value.c_time, 'm').format('YYYY-MM-DD HH:mm')
  }
}

// 指派
const chooseTaskPerson = () => {
  let { c_time, c_plan_begin_time, c_require_complete_time } = formData.value;
  formatData.value = {
    ...formatData.value,
    costTime: c_time + '',
    startTime: c_plan_begin_time,
    endTime: c_require_complete_time,
  }
  popupAdjust.value.open('center');
}

// 关闭指派框
const hideAdjustPopup = () => {
  uni.showModal({
    title: ' 提示',
    content: '确定放弃指派吗？',
    showCancel: true,
    success: async (res) => {
      if (res.confirm) {
        backToPage();
      }
    }
  });
}

// 选择人员
const choosePerson = ()=>{
  const taskId = formatData.value.c_code;
  uni.navigateTo({
    url: `../../RdsViews/TaskWork/modals/taskSlgSelUser?taskId=${taskId}&selectType=指派`
  });
}

// 指派
const assignTask = async () => {
  if (!formatData.value.personId) return;
  uni.showLoading({ title: "指派中...", mask: true });
  const req = [{
    TaskId: formatData.value.c_code,
    TaskUserNo: formatData.value.personId  //选择的人员编码
  }];
  const res = await mainService.request('taskallot', 'AssignTask', req);
  uni.hideLoading();
  if (res && res.length > 0) {
    if (res[0].ErrorMsg) {
      uni.showToast({
        duration: 2000,
        icon: 'none',
        title: res[0].ErrorMsg
      });
    } else {
      uni.showToast({
        duration: 2000,
        icon: 'none',
        title: '指派成功'
      });
      setTimeout(async () => {
        backToPage()
      }, 1000)
    }
  } else {
    uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '指派失败'
    });
  }
}

const confirm = async (e) => {
  const { c_name, c_plan_begin_time, c_require_complete_time, c_time } = formData.value;
  if (!c_name) {
    uni.showToast({
      duration: 3000,
      icon: 'none',
      title: '任务标题是必填项',
      mask: true,
    });
    return
  }
  if (!c_plan_begin_time) {
    uni.showToast({
      duration: 3000,
      icon: 'none',
      title: '任务开始时间是必填项',
      mask: true,
    });
    return
  }
  if (!c_require_complete_time) {
    uni.showToast({
      duration: 3000,
      icon: 'none',
      title: '任务结束时间是必填项',
      mask: true,
    });
    return
  }
  if (!c_time) {
    uni.showToast({
      duration: 3000,
      icon: 'none',
      title: '预估用时是必填项',
      mask: true,
    });
    return
  }
  service.enjoyShowLoading('正在保存...');
  const objectData = {
    ...formData.value,
    c_mk_dt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    c_mk_userno: loginInfo.sUser,
    c_modify_dt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    c_modify_userno: loginInfo.sUser,
    c_store_id: loginInfo.sUserStore,
    c_exclude: formData.value.c_exclude ? '1' : '0', // 是否排它 0:否 1:是
    c_is_match_store: formData.value.c_is_match_store ? '1' : '0', // 是否匹配在店
    c_must_upload_complate_img: formData.value.c_must_upload_complate_img ? '1' : '0', // 任务完成是否必须上传图片
  };
  const result = await rdsRequest(rdsUrl.mainApi, 'taskallot', 'SaveCustomTask', objectData);
  service.enjoyHideLoading();
  let ans = result + '';
  let { singleTag } = e;
  formatData.value.c_code = ans;
  if (ans) {
    if (singleTag === '指派') {
      chooseTaskPerson();
    } else if (singleTag === '发布') {
      uni.showToast({
        duration: 3500,
        icon: 'none',
        title: '任务发布成功',
        mask: true,
      });
      setTimeout(async () => {
        backToPage();
      }, 1000)
    }
  }
}

// 返回上页并刷新
const backToPage = () => {
  let pages = getCurrentPages();
  let prevPage = pages[pages.length - 2];
  uni.navigateBack({
    delta: 1,
    success: () => {
      if (prevPage && prevPage.$vm) {
        setTimeout(() => {
          prevPage.$vm.$.exposed.getData();
        }, 500);
      } else {
        console.error('Error: Previous page or method not found.');
      }
    },
    fail: (error) => {
      console.error('Navigation failed:', error);
    }
  });
}

// 记录指派人
const SelectionChanged = (selectType,item) => {
  formatData.value.personName = item.Value;
  formatData.value.personId = item.Key;
}

defineExpose({
  SelectionChanged
})

const getName = (key, value) => {
  if (!value) {
    return ''
  }
  let list = [];
  value.split(',').map(item => {
    list.push("[" + item + "]" + (getRelatedName(key, item) || key));
  })
  return list.join(',');
}

</script>

<style lang="scss" scoped>
@import '../../../main.scss';
.navigation {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  background: #F2F2F2;
}

// 顶部提示
.tips-view {
  width: 100%;
  height: 44rpx;
  background: rgba(0,173,96,0.05);
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  color: $uni-color-success;
  font-style: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.main-view {
  width: 100%;
  margin-top: 20rpx;
  display: flex;
  position: relative;
}

.list-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.card-title {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level3;
  font-size: $uni-font-size-level2;
  color: $uni-text-color-primary;
  line-height: 42rpx;
  font-style: normal;
}

.top-view {
  width: 710rpx;
  height: 449rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
}

.setting-view {
  width: 710rpx;
  height: 515rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
}

.detail-view {
  width: 710rpx;
  height: 366rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
}

.image-view {
  width: 710rpx;
  height: 274rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
}

// 底部按钮
.bottom-view {
  width: 100%;
  height: 100rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}
.center-style {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 20rpx;
  //gap: 20rpx;
}
.gap-view {
  width: 20rpx;
  height: 20rpx;
}

// 分隔线
.line-view {
  width: 100%;
  height: 1rpx;
  background: #EEEEEE;
}

.m-card-input-view2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 122rpx;
  background: $uni-bg-color-inverse;
  box-sizing: border-box;
  border-bottom: 1rpx solid #EEEEEE;
}

.m-card-input-title2 {
  width: 185rpx;
  height: 40rpx;
}

.m-title-text2 {
  font-size: $uni-font-size-level3;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-title;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
}

.time-view {
  display: flex;
  flex-direction: column;
}

.time-top {
  font-size: $uni-font-size-level0;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level3;
  color: $uni-text-color-primary;
  line-height: 50rpx;
  text-align: left;
  font-style: normal;
}

.time-bottom {
  font-size: $uni-font-size-level5;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-primary;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

.heng-view {
  width: 28rpx;
  height: 2rpx;
  background: $uni-text-color-weak;
  margin: 40rpx;
}

.m-image-btn {
  width: 148rpx;
  height: 148rpx;
  background: rgba(238, 238, 238, 0.25);
  border-radius: 10rpx;
  border: 1rpx dashed #CCCCCC;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.m-image-view {
  width: 40rpx;
  height: 37rpx;
  align-self: center;
  background-image: url(../../../static/img/imgUpload.png);
  background-size: 100% 100%;
}

.m-image-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  color: $uni-text-color-primary;
  line-height: 28rpx;
  text-align: right;
  font-style: normal;
  margin-top: 7rpx;
}

.btn-box {
  padding: 4rpx 16rpx 3rpx 16rpx;
  margin: 20rpx auto 0;
  width: 92rpx;
  height: 32rpx;
  font-size: 18rpx;
  color: #888888;
  background: #FFFFFF;
  border: 1rpx solid #EEEEEE;
  border-radius: 17rpx;
  box-sizing: border-box;
  .iconfont {
    font-size: 20rpx;
  }
}

</style>
